<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Xiao Huan云存储</title>
    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/dtree/dtree.css">
    <link rel="stylesheet" href="/layui/dtree/font/dtreefont.css">
    <link rel="stylesheet" href="/css/fileCommon.css">
</head>

<body>

<div class="header" style="background-image: linear-gradient(whitesmoke,mediumpurple);opacity: 0.5">
    <div class="layui-container" style="float: left">
        <div class="layui-logo">
            <img src="/img/file.png" height="50px"/><cite><span class="layui-hide-xs">Xiao Huan云盘</span></cite>
        </div>
    </div>

    <ul class="layui-nav layui-layout-right" >
        <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:void(0)" id="fullScreen" title="全屏"><i class="layui-icon layui-icon-screen-full"></i></a>
        </li>
        <li class="layui-nav-item" lay-unselect>
<!--            <div th:switch="${loginUser.getNickName()}">-->
<!--                <div th:case="管理员">-->
<!--                    <a><img th:src="@{/assets/img/006.jpg}" class="layui-nav-img"><cite-->
<!--                            th:utext="${loginUser.nickName}"></cite></a>-->
<!--                </div>-->
<!--                <div th:case="普通用户">-->
<!--                    <a><img th:src="@{/assets/img/016.jpg}" class="layui-nav-img"><cite-->
<!--                            th:utext="${loginUser.nickName}"></cite></a>-->
<!--                </div>-->
<!--                <div th:case="行如火">-->
<!--                    <a><img th:src="@{/assets/img/120.jpg}" class="layui-nav-img"><cite-->
<!--                            th:utext="${loginUser.nickName}"></cite></a>-->
<!--                </div>-->
<!--                <div th:case="*">-->
<!--                    <a><img th:src="@{/assets/img/062.jpg}" class="layui-nav-img"><cite-->
<!--                            th:utext="${loginUser.nickName}"></cite></a>-->
<!--                </div>-->
<!--            </div>-->
            <!-- 用户头像-->
                <div>
                    <div>
                        <a><img th:src="@{${chatUser.userHeaderImg}}" class="layui-nav-img"/><cite>[[${chatUser.userName}]]</cite></a>
                    </div>
                </div>

            <dl class="layui-nav-child">
                <dd lay-unselect><a href="javascript:void(0)" id="logout" data-url="/logout"><i class="layui-icon layui-icon-logout"></i>退出</a>
                </dd>
            </dl>
        </li>
    </ul>
</div>


<div class="layui-container" style="padding-top: 15px;opacity: 0.7;background-color: ghostwhite">
    <div class="layui-card" style="padding-top: 15px;opacity: 0.7;background-color: ghostwhite">
        <div class="layui-card-header">当前位置：<span id="tvFP">/</span><span id="tvFPId" hidden>/</span></div>
        <div class="layui-card-body">
            <div class="btnDiv">
                <button id="btnBack" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe65c;</i>返回上级
                </button>
                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
                <button  id="btnUpload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe681;</i>上传文件
                </button>
<!--                <button  id="btnUploadSharding" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">-->
<!--                    <i class="layui-icon">&#xe681;</i>分片上传-->
<!--                </button>-->
                <button style="display: none" id="btnDilaog" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe634;</i>弹窗选择
                </button>
<!--                <button  id="dirDilaog" class="layui-btn layui-btn-sm icon-btn">-->
<!--                    <i class="layui-icon layui-icon-app"></i>目录管理-->
<!--                </button>-->
            </div>
            <hr>

            <div class="file-list">  <!-- 文件列表-->

            </div>
        </div>
    </div>
</div>

<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a  id="open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
        <li><a  id="copy"><i class="layui-icon layui-icon-release"></i>&emsp;复制&emsp;</a></li>
        <li><a  id="move"><i class="layui-icon layui-icon-location"></i>&emsp;移动&emsp;</a></li>
        <li><a  id="rename"><i class="layui-icon layui-icon-survey"></i>&emsp;重命名&emsp;</a></li>
        <li><a  id="download"><i class="layui-icon layui-icon-download-circle"></i>&emsp;下载&emsp;</a></li>
        <li><a  id="del" style="color: red !important;"><i class="layui-icon layui-icon-delete" style="font-size: 19px;"></i>&nbsp;&nbsp;&nbsp;删除&emsp;</a></li>
    </ul>
</div>



<script type="text/html" id="uploadShardModel">
    <div class="layui-upload my-form">
        <button type="button" class="layui-btn layui-btn-normal" id="uploadShardList">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th width="20%">文件名</th>
                    <th width="10%">大小</th>
                    <th width="10%">状态</th>
                    <th width="40%">进度</th>
                    <th width="20%">操作</th>
                </tr>
                </thead>
                <tbody id="uploadList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </div>
</script>

<!--新增文件夹表单模态框-->
<script type="text/html" id="addFolderModel">
    <form class="layui-form my-form" id="addFolderForm" lay-filter="addFolderForm">
        <div class="layui-form-item">
            <label class="layui-form-label">文件夹名称</label>
            <div class="layui-input-block">
                <input type="text" name="folderName" required lay-verify="required" placeholder="请输入文件夹名称" autocomplete="off"
                       class="layui-input" id="folderName">
            </div>
        </div>
        <div class="layui-form-item form-text-right">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="addFolderBtn">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary"  id="closeFolderBtn">取消</button>
        </div>
    </form>
</script>

<!--重命名表单模态框-->
<script type="text/html" id="editRenameModel">
    <form class="layui-form my-form" id="editTreeNodeForm" lay-filter="editTreeNodeForm">
        <input type="hidden" name="id" >
        <div class="layui-form-item">
            <label class="layui-form-label">当前名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" autocomplete="off"
                       class="layui-input layui-disabled" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">修改名称</label>
            <div class="layui-input-block">
                <input type="text" name="rename" required lay-verify="required" placeholder="请输入名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item form-text-right">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="editTreeNodeBtn">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" id="closeRenameBtn">取消</button>
        </div>
    </form>
</script>

<!--目录管理模态框-->
<script type="text/html" id="dirModel">
    <form class="layui-form my-form" id="dirForm" lay-filter="dirForm" style="overflow:auto;">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline mr0">
                    <input id="searchDirInput" class="layui-input" type="text" placeholder="输入查询节点内容"/>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn icon-btn layui-btn-sm" id="searchDirTreeBtn">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button type="button" class="layui-btn icon-btn layui-btn-primary layui-btn-sm" id="refreshDirTreeBtn">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
            </div>
        </div>
        <ul id="dirTree" class="dtree" data-id="-1"></ul>
        <div class="layui-form-item form-text-right">
            <button type="button" class="layui-btn layui-btn-primary" id="dirCloseBtn">取消</button>
        </div>
    </form>
</script>

<!--文件移动表单模态框-->
<script type="text/html" id="moveModel">
    <form class="layui-form my-form" id="moveForm" lay-filter="moveForm" style="overflow:auto;">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline mr0">
                    <input id="searchMoveInput" class="layui-input" type="text" placeholder="输入查询节点内容"/>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn icon-btn layui-btn-sm" id="searchMoveTreeBtn">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button type="button" class="layui-btn icon-btn layui-btn-primary layui-btn-sm" id="refreshMoveTreeBtn">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
            </div>
        </div>
        <ul id="moveDirTree" class="dtree" data-id="-1"></ul>
        <div class="layui-form-item form-text-right">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="moveSubmitBtn">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" id="moveCloseBtn">取消</button>
        </div>
    </form>
</script>

<!-- 渲染模板 -->
<script id="fileTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="file-list-item" data-id="{{item.id}}" data-dir="{{item.isDir}}" data-url="{{item.url}}" data-name="{{item.fileName}}">
        <div class="file-list-img">
            {{# if(item.isImg){ }}
            <img src="{{item.url}}"/>
            {{# }else{ }}
            <img src="/img/fileIcon/{{item.type}}.png"/>
            {{# } }}
        </div>
        <div class="file-list-name">
            {{# if(item.isDir){ }}
            {{item.fileName}}
            {{# }else{ }}
            {{item.fileName}}
            {{# } }}
        </div>
    </div>
    {{#  }); }}
    {{# if(d.length<=0){ }}
    <div class="list-empty">
        <i class="layui-icon layui-icon-face-surprised"></i>
        <div>没有文件</div>
    </div>
    {{# } }}
</script>

<!--打分表单模态框-->
<script type="text/html" id="scoreModel">
    <form class="layui-form my-form" id="addScoreForm" lay-filter="addScoreForm">
        <input type="hidden" name="fileId" >
        <div class="layui-form-item">
            <label class="layui-form-label">打分</label>
            <div class="layui-input-block">
                <input type="text" name="score" placeholder="请输入分数: 0~100" required lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评论</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark" ></textarea>
            </div>
        </div>
        <div class="layui-form-item form-text-right">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="scoreBtn">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" id="closeScoreBtn">取消</button>
        </div>
    </form>
</script>
<!--查看打分表单模态框-->
<script type="text/html" id="checkScoreModel">
    <form class="layui-form my-form" id="checkScoreForm" lay-filter="checkScoreForm">
        <input type="hidden" name="fileId" >
        <div class="layui-form-item">
            <label class="layui-form-label">上传者</label>
            <div class="layui-input-block">
                <input type="text" name="uploaderId" required lay-verify="required" autocomplete="off"
                       class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">得分</label>
            <div class="layui-input-block">
                <input type="text" name="score" required lay-verify="required" autocomplete="off"
                       class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">评论</label>
            <div class="layui-input-block">
                <textarea  class="layui-textarea" name="remark" ></textarea>
            </div>
        </div>
        <div class="layui-form-item form-text-right">
            <button type="button" class="layui-btn layui-btn-primary" id="checkBtn">关闭</button>
        </div>
    </form>
</script>




<script type="text/javascript" src = "/layui/layui.js"></script>
<script type="text/javascript" src="/js/clipboard.js"></script>
<script type="text/javascript" src="/js/fileIndex.js"></script>

</body>
</html>
